<template>
	<div class="head">
        <router-link tag="div"  class="search" to="/search">
            <i class="icon-font icon-search">&#xe6ac;</i> 
            <input type="text" readonly="readonly" placeholder="搜索商品，请输入关键词">
        </router-link>        
	    <i class="icon-font  icon-remind">&#xe713;</i>
	</div>	
</template>
<script type="text/ecmascript-6">
	
</script>
<style scoped lang='scss' type="text/css">
@import "~common/scss/variable.scss";
@import "~common/scss/mixin.scss";
.head{
    height:45px;
    background-color: rgba(255,255,255,0.9);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0 auto;
    border-bottom: 0 none;
         position: fixed;
        top: 0;
        left: 50%;
        -webkit-transform: translate3d(-50%,0,0);
        -ms-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);    
}
.search{
    height:30px;
    line-height:30px;
    margin: 7px 0 7px 15px;
    background-color:#f1f2f4;
    position:relative;
    border-radius:5px;
    width: 80%;
}
 .search>span{
    position:absolute;
    left:10px;
    top:4px;
    width:14px;
    height:14px;
} 
.search>input{
    margin-left:32px;
    font-size:14px;
    width:85%;
    height: 20px;
    line-height:20px;   
}

.head>span{
    position:absolute;
    right:25px;
    top: 14px;
    @include extend-click;
}
.head>i{
    font-size:16px;
    position:absolute;
    right:25px;
    font-style:normal;
    top: 12px;
    @include extend-click;
}


/* 图标 */
.icon-search{
    position:absolute;
    left:10px;
    top:5px;
    width:14px;
    height:14px;
}	
</style>